<template>
  <a-modal v-model:visible="editVisible" title="修改靓号" :footer="null">
    <a-form
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
    >
      <a-form-item name="mobile" label="手机号" v-bind="validateInfos.mobile">
        <a-input type="text" v-model:value="modelRef.mobile"/>
      </a-form-item>
      <a-form-item name="price" label="价格" v-bind="validateInfos.price">
        <a-input type="text" v-model:value="modelRef.price"/>
      </a-form-item>
      <a-form-item name="gender" label="等级" v-bind="validateInfos.level">
        <a-select v-model:value="modelRef.level">
          <a-select-option :value="1">1级</a-select-option>
          <a-select-option :value="2">2级</a-select-option>
          <a-select-option :value="3">3级</a-select-option>
          <a-select-option :value="4">4级</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="gender" label="状态" v-bind="validateInfos.status">
        <a-select v-model:value="modelRef.status">
          <a-select-option :value="1">已占用</a-select-option>
          <a-select-option :value="2">未使用</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space :size="20">
          <a-button type="normal" @click="resetModalData()">关闭</a-button>
          <a-button type="primary" @click="onSubmit">修改</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {ref, toRaw, watch} from "vue";
import {message} from "ant-design-vue";
import {useForm} from "ant-design-vue/es/form";

import {modelRef, rulesRef} from "@/views/Pretty/Main/EditForm/config";
import {prettyStore} from "@/views/Pretty/Main/config";
import {ISubmit} from "@/views/Pretty/Main/EditForm/types";

const editVisible = ref(false)
watch(editVisible, () => {
  modelRef.mobile = prettyStore.currentPrettyDetail.mobile
  modelRef.price = prettyStore.currentPrettyDetail.price
  modelRef.level = prettyStore.currentPrettyDetail.level
  modelRef.status = prettyStore.currentPrettyDetail.status
})
const {resetFields, validate, validateInfos} = useForm(modelRef, rulesRef, {
  // 监听表单变化，相当于@input
  // onValidate: (...args) => console.log(...args),
});
const handleEditModal = (flag: boolean) => {
  editVisible.value = flag
}
const resetModalData = () => {
  editVisible.value = false
  resetFields()
}
const onSubmit = () => {
  validate()
      .then(async () => {
        const params: ISubmit = Object.assign(toRaw(modelRef), {id: prettyStore.currentPrettyDetail.id})
        const flag = await prettyStore.updatePrettyAction(params)
        if (flag) {
          resetModalData()
        }
      })
      .catch(err => {
        const defaultInfo = err.errorFields[0].errors[0]
        message.error(defaultInfo)
      });
};
defineExpose({
  handleEditModal
})
</script>

<style lang="less" scoped></style>
